.row
  #tutorial-cards
    width: 100%

    .list
      display: flex
      flex-wrap: wrap

      .col-md-6
        padding: 16px 0

        @media (min-width: 768px)
          &:nth-child(odd)
            padding: 0 16px 16px 0

          &:nth-child(even)
            padding: 0 0 16px 16px

    .pagination
      padding: 8px 16px
      border-radius: 8px
      border: 1px solid var(--pst-border-color)
      width: fit-content
      margin: 0 auto

      li
        margin: 0 5px

        a.page
          display: flex
          align-items: center
          justify-content: center
          text-decoration: none
          height: 32px
          width: 32px
          border-radius: 4px
          border: 1px solid var(--pst-border-color)

        &.active
          a.page
            color: #fff
            background-color: var(--pst-color-primary)
            border: 1px solid var(--pst-color-primary)

div.card.tutorials-card
  border-radius: 8px
  height: 100%
  cursor: pointer

  .card-body
    padding: 0

    .tutorials-image
      overflow: hidden
      border-radius: 8px 8px 0 0

      img
        width: 100%
        height: 100%
        object-fit: contain
        transition: transform 0.3s ease-in-out
        aspect-ratio: 16/9

        &:hover
          transform: scale(1.05)

    .tutorials-card-content
      padding: 16px

      .card-title-container
        margin-bottom: 8px

        strong
          font-weight: 600

      .card-summary
        font-size: 14px
        margin-bottom: 8px

      .tags
        font-size: 14px
        margin-bottom: 0

      .card-summary, .tags
        font-size: 14px
        color: var(--pst-color-text-secondary)

.guides-card
  border: 1px solid #e0e0e0
  border-radius: 8px
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
  height: 100%
  transition: transform 0.2s ease, box-shadow 0.2s ease

  &:hover
    transform: translateY(-2px)
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15)

  .card-body
    display: flex
    flex-direction: column
    padding: 1rem 1.5rem 1.5rem

  .card-title
    color: var(--pst-color-text-base)
    font-weight: 600
    margin-top: 0.5rem
    margin-bottom: 0.5rem
    font-size: 1.1rem

  .card-text
    flex-grow: 1
    color: var(--pst-color-text-secondary)
    font-size: 14px
    margin-bottom: 15px
    line-height: 1.4

  .badge
    font-size: 11px
    margin-right: 5px
    padding: 4px 10px
    background: var(--pst-color-text-base)
    color: #fff
    border-radius: 6px
    font-weight: 600
    letter-spacing: 0.04em
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08)

  .btn-outline-primary
    background-color: var(--pst-color-primary)
    color: #fff
    border-color: var(--pst-color-primary)
    font-weight: 600
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)

    &:hover,
    &:focus
      background-color: #fff
      color: var(--pst-color-primary)
      border-color: var(--pst-color-primary)

  .d-flex.align-items-center
    justify-content: space-between

    .badge
      width: 48%
      text-align: center
      display: inline-block
      margin-right: 0